<template>
    <SlideList
        class="size-full"
        ref="slideListRef"
        :list="exerciseList"
        :start-index="startIndex"
    >
        <template #item="{ item, status, switchProgress }">
            <NewWordExercise
                class="size-full"
                :autoplay="status == 'current' && switchProgress == 0"
                :actived="status == 'current' && switchProgress == 0"
                :exercise="item"
                v-if="item.type == ExerciseType.NEW_WORD_EXERCISE"
            />
            <PronounceChoiceChineseExercise
                class="size-full"
                :actived="status == 'current' && switchProgress == 0"
                :autoplay="status == 'current' && switchProgress == 0"
                :exercise="item"
                v-if="
                    item.type == ExerciseType.PRONOUNCE_CHOICE_CHINESE_EXERCISE
                "
            />
            <ChinesePronounceEnglishExercise
                class="size-full"
                :actived="status == 'current' && switchProgress == 0"
                :autoplay="status == 'current' && switchProgress == 0"
                :exercise="item"
                v-if="
                    item.type == ExerciseType.CHINESE_PRONOUNCE_ENGLISH_EXERCISE
                "
            />
            <EnglishChoiceChineseExercise
                class="size-full"
                :exercise="item"
                :actived="status == 'current' && switchProgress == 0"
                :autoplay="status == 'current' && switchProgress == 0"
                v-if="item.type == ExerciseType.ENGLISH_CHOICE_CHINESE_EXERCISE"
            />
            <ChineseChoiceEnglishExercise
                class="size-full"
                :exercise="item"
                :actived="status == 'current' && switchProgress == 0"
                v-if="item.type == ExerciseType.CHINESE_CHOICE_ENGLISH_EXERCISE"
            />
            <ChineseSpellingEnglishExercise
                class="size-full"
                :exercise="item"
                :actived="status == 'current' && switchProgress == 0"
                v-if="
                    item.type == ExerciseType.CHINESE_SPELLING_ENGLISH_EXERCISE
                "
            />
        </template>
    </SlideList>
</template>

<script setup lang="ts">
    import { onUnmounted, reactive, ref, watch } from "vue"
    import SlideList from "../components/common/SlideList.vue"
    import ChineseChoiceEnglishExercise from "../components/exercise/ChineseChoiceEnglishExercise.vue"
    import ChinesePronounceEnglishExercise from "../components/exercise/ChinesePronounceEnglishExercise.vue"
    import ChineseSpellingEnglishExercise from "../components/exercise/ChineseSpellingEnglishExercise.vue"
    import EnglishChoiceChineseExercise from "../components/exercise/EnglishChoiceChineseExercise.vue"
    import NewWordExercise from "../components/exercise/NewWordExercise.vue"
    import PronounceChoiceChineseExercise from "../components/exercise/PronounceChoiceChineseExercise.vue"
    import { Exercise, ExerciseType } from "../model"
    import { useExerciseStore } from "../store"

    const { generateExercises, unfinishedExercises, finishedExercises } =
        useExerciseStore()

    const exerciseList: Exercise[] = reactive([...finishedExercises])

    if (unfinishedExercises.length == 0) {
        generateExercises()
    }

    addUnfinishedExercises()

    function addUnfinishedExercises() {
        for (const exercise of unfinishedExercises) {
            if (exercise != exerciseList[exerciseList.length - 1]) {
                exerciseList.push(exercise)
                // 监听exercise完成，然后再添加一个未完成的exercise
                const stopWatch = watch(
                    () => exercise.resultCorrect,
                    (r) => {
                        if (r != undefined) {
                            stopWatch()
                            addUnfinishedExercises()
                            if (r) {
                                setTimeout(slideListRef.value.switchNext, 500)
                            }
                        }
                    }
                )
                return
            }
        }
    }

    let startIndex = exerciseList.length - 1
    if (startIndex < 0) startIndex = 0

    const slideListRef = ref()

    const stopWatchLenth = watch(
        () => unfinishedExercises.length,
        (len) => {
            if (len == 0) {
                generateExercises()
            }
        }
    )

    onUnmounted(stopWatchLenth)
</script>
